<template>
    <n-data-table :columns="columns" :row-key="(row:any)=>row[key||'id']" v-bind="$attrs" :data="list" class="flex-1" />
    <div class="mt-xs w-full" v-if="pageObj">
        <n-pagination class="justify-center" v-model:page="pageObj.current" v-model:page-size="pageObj.size"
            :item-count="pageObj.total" show-size-picker :page-sizes="[10, 20, 30, 50]"
            @update:page="handlePageUpdate" @update:page-size="handlePageSizeUpdate" />
    </div>
</template>

<script  setup lang='ts' >
import { DataTableColumn} from 'naive-ui';


const emit = defineEmits(['pageUpdate'])

type Props = {
    list:any[],columns:DataTableColumn<any>[],pageObj?:Common.Page<any> ,key?:string
}
const { list,columns,pageObj } = defineProps<Props>()
function handlePageUpdate(page: number){
	if(pageObj)
		pageObj.current = page
  emit("pageUpdate",page,pageObj!.size)
}
function handlePageSizeUpdate(pageSize: number){
	if(pageObj){
		pageObj.size = pageSize
		pageObj.current = 1
	}
  emit("pageUpdate",1,pageSize)
}


defineOptions({ name: 'SDataTable' });
</script>

<style lang='scss' scoped>
</style>
